<template>
	<div>
		<Gheader :showheader="Gheaderdata"></Gheader>
		<Scroll class="wrap">
			<div>
				<div class="box">
					<img :src="goodsimg" class="flower" />
					<!--品牌名字-->
					<div class="brand">
						<div class="brandtop">
							<div class="mark">品牌标志</div>
							<div class="markname">
								<h1>{{brandname}}</h1>
								<p>来自{{areaType}}</p>

							</div>
						</div>
					</div>
					<!--品牌介绍-->
					<div class="introbrand">
						<p>{{brandintro}}</p>
						<!--点击下拉按钮-->
						<div class="dropdown"></div>
					</div>

					<!--全部商品-->
					<div class="allgoods">
						<div class="allgoodscot">
							全部商品
						</div>
					</div>
					<ul class="ProductList">
						<li v-for="item in product" @click="tootherpage(item.id)">
							<img :src="item.imgurl" />
							<h2>{{item.goodsname}}</h2>
							<p>{{item.goodsintro}}</p>
							<span class="form">
							<img :src="item.nationalflag" class="flagimg"/>
							<img :src="phane" class="plane"/>
							<em>海外直邮</em>
							</span>
							<h3 class="price">¥ {{item.price}}</h3>
						</li>
					</ul>
					<!--加载更多-->
					<span class="loading">加载更多</span>

				</div>
			</div>

		</Scroll>
	</div>

</template>

<script>
	import Scroll from "../../../base/Scroll"
	import Gheader from "../G-person/person-center/Gheader"
	export default {
		name: "Goodsname",
		data() {
			return {
				phane: "../../../static/D-img/飞机1.png",
				goodsimg: "../../../static/D-img/花背景.png",
				Gheaderdata: {
					word: '品牌名字',
					left: [true, false, false],
					right: [false, false, false, true, false, false],
					leftword: "",
					rightword1: "",
					rightword2: ""
				},
				product: [],
				brandname: "",
				brandintro: "",
				areaType: ""
			}
		},
		components: {
			Gheader,
			Scroll
		},
		created: function() {
			var brand = this.$route.params.Brand;
			console.log(brand);
			this.axios.post("/api/goodsname", {
				brand: brand
			}).then(function(data) {
				console.log(data);
				this.product = data.data.allArr.brandArr;
				this.brandname = data.data.allArr.brandname;
				this.brandintro = data.data.allArr.brandintro;
				this.areaType = data.data.allArr.areaType;
			}.bind(this));
		},
		methods:{
			tootherpage:function(id){
				window.location.href = "#/Goodsdetails/"+id ;
			}
		}
	}
</script>

<style scoped>
	.wrap {
		overflow: hidden;
		height: 90vh;
		background-color: #f2f2f2;
	}
	
	.box {
		width: 100%;
		background: #f2f2f2;
	}
	
	.flower {
		width: 100%;
	}
	
	.brand {
		width: 100%;
		padding-bottom: 1.5rem;
		border-bottom: 1px solid #808080;
		background: white;
	}
	
	.brandtop {
		width: 100%;
		position: relative;
		padding: 0 3%;
	}
	
	.mark {
		display: inline-block;
		font-size: 1.2rem;
		line-height: 1.5rem;
		width: 2.5rem;
		height: 2.8rem;
		padding: 1.3rem;
		border: 1px solid #ccc;
		vertical-align: bottom;
		background: white;
		position: absolute;
		top: -1.2rem;
		text-align: center;
	}
	
	.markname {
		display: inline-block;
		vertical-align: bottom;
		padding-left: 6rem;
		width: 60%;
		font-size: 1rem;
	}
	
	.markname h1 {
		font-weight: 400;
		font-size: 1.5rem;
	}
	
	.markname p {
		font-size: 1.2rem;
		color: #808080;
		font-weight: 200;
	}
	
	.introbrand {
		width: 100%;
		background: white;
		padding-bottom: 1rem;
	}
	
	.introbrand p {
		width: 94%;
		margin: 0.5rem auto;
		font-size: 1rem;
		color: #4d4d4d;
		font-weight: 200;
		text-indent: 2em;
	}
	
	.dropdown {
		margin: 0 auto;
		width: 1rem;
		height: 1rem;
		border-right: 0.1rem solid #C1C1C1;
		border-bottom: 0.1rem solid #C1C1C1;
		transform: rotate(45deg);
	}
	
	.allgoods {
		width: 100%;
		background: white;
		margin-top: 1rem;
		border-bottom: 1px solid #ccc;
	}
	
	.allgoodscot {
		width: 94%;
		margin: 0 auto;
		font-size: 1.5rem;
		padding: 1rem 0;
	}
	
	.ProductList li {
		overflow: hidden;
		border-bottom: 1px solid #c1c1c1;
		background-color: white;
		margin-bottom: 1rem;
	}
	
	.ProductList li>img {
		width: 20%;
		height: 8rem;
		margin: 1.5rem;
		float: left;
		margin-bottom: 1rem;
	}
	
	.ProductList li h2 {
		margin-top: 1.4rem;
		font-size: 1.4rem;
		font-weight: 400;
		margin-bottom: 0.3rem;
		color: #262626;
	}
	
	.ProductList li h3 {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		font-size: 1.2rem;
		font-weight: 400;
		margin-right: 1rem;
		color: #3c3c3c;
	}
	
	.ProductList li p {
		
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 2;
		/** 显示的行数 **/
		overflow: hidden;
		/** 隐藏超出的内容 **/
		
	}
	
	.form {
		display: inline-block;
		margin-top: 1.5rem;
	}
	
	.form em {
		font-size: 1.1rem;
		font-weight: 200;
		vertical-align: middle;
	}
	
	.flagimg {
		width: 100%;
		width: 2rem;
		height: 1.4rem;
		vertical-align: middle;
		padding-right: 0.5rem;
	}
	
	.plane {
		width: 1.6rem;
		height: 1.6rem;
		padding-right: 0.5rem;
		vertical-align: middle;
	}
	
	.nationalFlag {
		display: inline-block;
		width: 1.5rem;
		height: 1.1rem;
		background-color: #EFEFEF;
		border: 1px solid #c1c1c1;
		text-align: center;
		vertical-align: bottom;
	}
	
	.nationalFlag span {
		width: 0.5rem;
		height: 0.5rem;
		border-radius: 50%;
		background-color: #d72532;
		display: inline-block;
		vertical-align: top;
		margin-top: 0.35rem;
	}
	
	.ProductList .price {
		float: right;
		margin-right: 1.5rem;
		color: #d72533;
		margin-top: 1.5rem;
	}
	
	.loading {
		width: 100%;
		background-color: #f2f2f2;
		text-align: center;
		display: inline-block;
		padding-top: 0.8rem;
		padding-bottom: 0.8rem;
		font-size: 1.1rem;
		color: #6d6d6d;
		font-weight: 300;
	}
</style>